<template>
    <div
        :class="`animation-box ${transitionClass}`"
        :style="{
            width: `${config.width}px`,
            height: `${config.height}px`,
        }"
        >
        <preview
            v-for="item in pages"
            :key="item.mark"
            :ref="item.mark"
            :is-edit="false"
            :page="item"
            :page-config="pageConfig"
            :page-data="config.value"
            @end="onPerStop"
            @tick="timeTick"
            :class="currentPage === item.mark ? 'active preview-item' : 'preview-item'"
        />
    </div>
</template>

<script>
import Preview from '../build/Preview/index.vue';
import Transition from './transition';

export default {
    props: ['config'],
    components: {
        Preview,
    },
    data() {
        return {
            currentPage: '',
            transitionClass: 'none',
        };
    },
    computed: {
        pages() {
            return this.config.pages || [];
        },
        pageConfig() {
            const { config } = this;
            return {
                style: {
                    width: config.width,
                    height: config.height,
                },
            };
        },
    },
    mounted() {
        this.transition = new Transition(
            (current, next, data) => {
                console.log('start end')
            },
            (current, next, data) => {
                console.log('next end');
                const { currentMark, nextMark } = data;
                this.transitionClass = 'none';
                this.currentPage = nextMark;
                this.$refs[nextMark][0].play();
            }
        );
    },
    methods: {
        onPerStop(mark) {
            const pageIndex = this.pages.findIndex(vo => vo.mark === mark);
            if (pageIndex < this.pages.length - 1) {
                const current = this.pages[pageIndex];
                const next = this.pages[pageIndex + 1];
                const { transition = { name: 'none', duration: 10 } } = current;
                if (transition.name === 'none') {
                    setTimeout(() => {
                        this.transitionClass = transition.name;
                        this.currentPage = next.mark;
                        this.$refs[next.mark][0].play();
                    }, transition.duration);
                } else {
                    this.transition.start(
                        this.$refs[current.mark][0].$el,
                        this.$refs[next.mark][0].$el,
                        {
                            currentMark: current.mark,
                            nextMark: next.mark,
                        }
                    );
                    this.$refs[current.mark][0].$el.style.animationDuration = `${transition.duration / 1000}s`;
                    this.$refs[next.mark][0].$el.style.animationDuration = `${transition.duration / 1000}s`;
                    this.transitionClass = transition.name;
                    
                }
            } else {
                this.$emit('stop');
            }
        },
        start() {
            const firstPage = this.pages[0];
            if (firstPage) {
                this.currentPage = firstPage.mark;
                this.$refs[firstPage.mark][0].play();
            }
        },
        seek(timestamp) {
            const { pages = [] } = this;
            let timeline = 0;
            let i = 0; 
            for (;i < pages.length; i += 1) {
                const page = pages[i];
                const { components = [], transition = {} } = page;
                const { duration = 10 } = transition;
                let pageDuration = 0;
                for (let j = 0; j < components.length; j += 1) {
                    const component = components[j];
                    const { status = [] } = component;
                    for (let k = 0; k < status.length; k += 1) {
                        const st = status[k];
                        if (pageDuration < st.timer) {
                            pageDuration = st.timer;
                        }
                    }
                }
                pageDuration += duration;
                if (timeline + pageDuration > timestamp) {
                    break;
                }
                timeline += pageDuration;
            }
            if (i < pages.length) {
                const targetStamp = timestamp - timeline;
                this.currentPage = pages[i].mark;
                this.$refs[pages[i].mark][0].seek(timestamp);
            }
        },
        timeTick(info) {
            const { timeline, mark } = info;
            const { pages = [] } = this.config;
            const pageIndex = pages.findIndex(vo => vo.mark === mark);
            if (pageIndex >= 1) {
                let currentTime = 0;
                for (let i = 0; i < pageIndex; i++) {
                    const page = pages[i];
                    const {  duration: transitionDuration = 10 } = page.transition;
                    const { components = [] } = page;
                    let duration = 0;
                    for (let j = 0; j < components.length; j++) {
                        const component = components[j];
                        const { status = [] }  = component;
                        for (let k = 0; k < status.length; k++) {
                            const st = status[k];
                            if (duration < st.timer) {
                                duration = st.timer;
                            }
                        }
                    }
                    currentTime += (duration + transitionDuration);
                }
                this.$emit('tick', currentTime + timeline);
            } else {
                this.$emit('tick', timeline);
            }
        },
    }
}
</script>

<style lang="less" scoped>
.animation-box {
    display: inline-block;
    position: relative;
    .preview-item {
        opacity: 0;
        width: 100%;
        height: 100%;
        &.active {
            opacity: 1;
            z-index: 10;
            & + .preview-item{
                opacity: 1;
            }
        }
    }
}
@import url('./transition.less');
</style>